<script setup>
import { ref,onMounted } from 'vue'
import { useFoodStore } from '../stores/food.js'

const foodStore = useFoodStore()
const selectedCategory = ref('all')
const randomFood = ref(null)

const categories = [
    { value: 'all', label: '全部' },
    { value: 'breakfast', label: '早餐' },
    { value: 'lunch', label: '午餐' },
    { value: 'dinner', label: '晚餐' }
]
// 在组件挂载时获取食物列表
onMounted(async () => {
    try {
        await foodStore.fetchFoods()
    } catch (error) {
        // 可以添加错误提示
        ElMessage.error('获取食物列表失败')
    }
})

const getRandomFood = async () => {
    try {
        const category = selectedCategory.value === 'all' ? null : selectedCategory.value
        randomFood.value = await foodStore.getRandomFood(category)
    } catch (error) {
        ElMessage.error('获取随机食物失败')
    }
}
</script>

<template>
    <div class="home">
        <el-card class="random-section">
            <el-select v-model="selectedCategory" class="category-select">
                <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>

            <el-button type="primary" size="large" @click="getRandomFood">
                今天吃什么？
            </el-button>

            <div v-if="randomFood" class="result">
                <img :src="randomFood.imageUrl" :alt="randomFood.name">
                <h2>{{ randomFood.name }}</h2>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.home {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.random-section {
    text-align: center;
}

.category-select {
    margin-bottom: 20px;
}

.result {
    margin-top: 20px;
}

.result img {
    max-width: 300px;
    margin-bottom: 10px;
}
</style>